
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" charset="utf-8" src="../layui/xm-select1.js"></script>
<!--  <link rel="stylesheet" href="../layui/css/layui.css">-->
<!--  <script src="../layui/layui.js"></script>-->
  <link rel="stylesheet" href="../layui-v2.9.8/layui/css/layui.css">
  <script src="../layui-v2.9.8/layui/layui.js"></script>
</head>
<body>

<style>
  .layui-form-label {
    text-align: left; /* 设置文字左对齐 */
  }
</style>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>成交单修改申请</legend>
</fieldset>

<form class="layui-form" action="/process/proofbargainModifyingDocuments" enctype="multipart/form-data" method="post"id="proofbargainForm">
  <div style="display: none"><input type="text"name="id" id="formid" th:value="${ProofBargain.id}"></div>
  <div style="display: none"><input type="text"name="ProcessEntityPaymentWay" id="ProcessEntityPaymentWay" th:value="${ProcessEntity.paymentWay}"></div>
  <!--    第一行-->

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">用户</label>
      <div class="layui-input-inline">
        <input type="text" name="name" lay-verify="name"   autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.name}">
      </div>
    </div>

    <div class="layui-inline">
      <label class="layui-form-label">电话</label>
      <div class="layui-input-inline">
        <input type="text" name="telephone" lay-verify="telephone"   autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.telephone}">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">身份证号码</label>
      <div class="layui-input-inline">
        <input type="text" name="idCard" lay-verify="idCard"   autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.idCard}">
      </div>
    </div>

    <div class="layui-inline">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-inline">
        <input type="text" name="sex" lay-verify="sex"   autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.sex}" >
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">向日葵</label>
      <div class="layui-input-inline">
        <input type="text" name="sunflower" lay-verify="sunflower"   autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.sunflower}">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">QQ</label>
      <div class="layui-input-inline">
        <input type="text" name="QQ" lay-verify="QQ"   autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.QQ}">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">加好友日期</label>
      <div class="layui-input-inline">
        <input type="text" name="friendDate" id="friendDate" lay-verify="friendDate"  autocomplete="off" class="layui-input" th:value="${ProofBargain.friendDate}">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">转账日期</label>
      <div class="layui-input-inline">
        <input type="text" name="transferDate" id="transferDate" lay-verify="transferDate" readonly autocomplete="off" class="layui-input" th:value="${ProofBargain.transferDate.substring(ProofBargain.transferDate.lastIndexOf('/') + 1)}">
      </div>
    </div>
  </div>

  <!-- 新增是否全款 -->
  <div class="layui-form-item" lay-verify="paymentWay">
    <label class="layui-form-label">是否全款</label>
    <div class="layui-input-block">
      <input type="radio" name="paymentWay" value="1" title="是" lay-filter="paymentWay" id="radioYes">
      <input type="radio" name="paymentWay" value="2" title="否" lay-filter="paymentWay" id="radioNo">
    </div>
  </div>

  <!-- 发票选择和合同签署方式的外层div，用于控制显示和隐藏 -->
  <div class="invoice-contract" id="invoice-contract">
    <!-- 合同签署方式 contract-->
    <div class="layui-form-item">
      <label class="layui-form-label">合同签署</label>
      <div class="layui-input-block">
        <input type="radio" name="contract" value="电子签" title="电子签" lay-verify="contract" th:checked="${ProofBargain.contract != null and ProofBargain.contract.contains('电子签')}">
        <input type="radio" name="contract" value="网签" title="网签" lay-verify="contract" th:checked="${ProofBargain.contract != null and ProofBargain.contract.contains('网签')}">
        <input type="radio" name="contract" value="邮寄" title="邮寄" lay-verify="contract" th:checked="${ProofBargain.contract != null and ProofBargain.contract.contains('邮寄')}">
      </div>
    </div>
    <!-- 发票选择方式 invoice-->
    <div class="layui-form-item">
      <label class="layui-form-label">发票选择</label>
      <div class="layui-input-block">
<!--        <input type="radio" name="invoice" value="纸质发票" title="纸质发票" lay-verify="invoice" th:checked="${ProofBargain.invoice != null and ProofBargain.invoice.contains('纸质发票')}">-->
        <input type="radio" name="invoice" value="电子发票" title="电子发票" lay-verify="invoice" th:checked="${ProofBargain.invoice != null and ProofBargain.invoice.contains('电子发票')}">
        <input type="radio" name="invoice" value="无" title="无" lay-verify="invoice" th:checked="${ProofBargain.invoice != null and ProofBargain.invoice.contains('无')}">
      </div>
    </div>
  </div>


  <!--将收款方式的单选改为多选-->
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">收款方式</label>
      <div class="layui-input-block" id="paymentMethod" >
        <input type="checkbox" name="paymentMethod" lay-skin="tag"  value="银行转账" title="银行转账" lay-verify="paymentMethod" th:checked="${ProofBargain.paymentMethod.substring(ProofBargain.paymentMethod.lastIndexOf('/') + 1).contains('银行转账')}">
        <input type="checkbox" name="paymentMethod" lay-skin="tag" value="微信" title="微信" lay-verify="paymentMethod" th:checked="${ProofBargain.paymentMethod.substring(ProofBargain.paymentMethod.lastIndexOf('/') + 1).contains('微信')}">
        <input type="checkbox" name="paymentMethod" lay-skin="tag" value="支付宝" title="支付宝" lay-verify="paymentMethod" th:checked="${ProofBargain.paymentMethod.substring(ProofBargain.paymentMethod.lastIndexOf('/') + 1).contains('支付宝')}">
        <input type="checkbox" name="paymentMethod" lay-skin="tag" value="工行码" title="工行码" lay-verify="paymentMethod" th:checked="${ProofBargain.paymentMethod.substring(ProofBargain.paymentMethod.lastIndexOf('/') + 1).contains('工行码')}">
        <input type="checkbox" name="paymentMethod" lay-skin="tag" value="聚合码" title="聚合码" lay-verify="paymentMethod" th:checked="${ProofBargain.paymentMethod.substring(ProofBargain.paymentMethod.lastIndexOf('/') + 1).contains('聚合码')}">
        <input type="checkbox" name="paymentMethod" lay-skin="tag" value="建行码" title="建行码" lay-verify="paymentMethod" th:checked="${ProofBargain.paymentMethod.substring(ProofBargain.paymentMethod.lastIndexOf('/') + 1).contains('建行码')}">
        <input type="checkbox" name="paymentMethod" lay-skin="tag" value="农行" title="农行" lay-verify="paymentMethod" th:checked="${ProofBargain.paymentMethod.substring(ProofBargain.paymentMethod.lastIndexOf('/') + 1).contains('农行')}">
        <input type="checkbox" name="paymentMethod" lay-skin="tag" value="招行码" title="招行码" lay-verify="paymentMethod" th:checked="${ProofBargain.paymentMethod.substring(ProofBargain.paymentMethod.lastIndexOf('/') + 1).contains('招行码')}">
      </div>
    </div>
  </div>
  <!--将收款方的单选改为多选-->
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">收款方</label>
      <div class="layui-input-block" id="paymentAddress">
        <input type="checkbox" name="paymentAddress" lay-skin="tag" value="易诚科技" title="易诚科技" lay-verify="paymentAddress" th:checked="${ProofBargain.paymentAddress.substring(ProofBargain.paymentAddress.lastIndexOf('/') + 1).contains('易诚科技')}">
        <input type="checkbox" name="paymentAddress" lay-skin="tag" value="易诚工行" title="易诚工行" lay-verify="paymentAddress" th:checked="${ProofBargain.paymentAddress.substring(ProofBargain.paymentAddress.lastIndexOf('/') + 1).contains('易诚工行')}">
        <input type="checkbox" name="paymentAddress" lay-skin="tag" value="易诚农行" title="易诚农行" lay-verify="paymentAddress" th:checked="${ProofBargain.paymentAddress.substring(ProofBargain.paymentAddress.lastIndexOf('/') + 1).contains('易诚农行')}">
        <input type="checkbox" name="paymentAddress" lay-skin="tag" value="易诚建行" title="易诚建行" lay-verify="paymentAddress" th:checked="${ProofBargain.paymentAddress.substring(ProofBargain.paymentAddress.lastIndexOf('/') + 1).contains('易诚建行')}">
<!--        <input type="checkbox" name="paymentAddress" lay-skin="tag" value="李建祥" title="李建祥" lay-verify="paymentAddress" th:checked="${ProofBargain.paymentAddress.substring(ProofBargain.paymentAddress.lastIndexOf('/') + 1).contains('李建祥')}">-->
        <input type="checkbox" name="paymentAddress" lay-skin="tag" value="招行" title="招行"lay-verify="paymentAddress" th:checked="${ProofBargain.paymentAddress.substring(ProofBargain.paymentAddress.lastIndexOf('/') + 1).contains('招行')}">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">收款金额(元)</label>
      <div class="layui-input-inline">
        <input type="text" name="paymentAmount" lay-verify="paymentAmount"   autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.paymentAmount}">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">成交周期(天)</label>
      <div class="layui-input-inline">
        <input type="text" readonly name="tradeTime" id="tradeTime" lay-verify="tradeTime"   autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.tradeTime}">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">地址</label>
      <div class="layui-input-inline">
        <input type="text" name="address" lay-verify="required"   autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.address}">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-inline">
        <input type="text" name="remarks" lay-verify="required"   autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.remarks.substring(ProofBargain.remarks.lastIndexOf('/') + 1)}">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">业务员</label>
      <div class="layui-input-inline">
        <input type="text" name="salesman" readonly lay-verify="required" autocomplete="off" class="layui-input" th:value="${ProofBargain.salesman}">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">定金日期及金额</label>
      <div class="layui-input-inline">
        <input type="text" name="deposit"    autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.deposit.substring(ProofBargain.deposit.lastIndexOf('/') + 1)}">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">补款日期及金额</label>
      <div class="layui-input-inline">
        <input type="text" name="supplementaryPayment"   autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.supplementaryPayment.substring(ProofBargain.supplementaryPayment.lastIndexOf('/') + 1)}">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">尾款日期及金额</label>
      <div class="layui-input-inline">
        <input type="text" name="balancePayment"    autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.balancePayment.substring(ProofBargain.balancePayment.lastIndexOf('/') + 1)}">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">资金量(万)</label>
      <div class="layui-input-inline">
        <input type="text" name="financingVolume" lay-verify="financingVolume"   autocomplete="off"  lay-affix="clear" class="layui-input" th:value="${ProofBargain.financingVolume}">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">审核人</label>
      <div class="layui-input-block">
        <select id="auditingperson" name="auditingPerson" lay-verify="required">
          <option value=""></option>
          <option th:each="BaseUser : ${lb}"th:value="${BaseUser.username}" th:text="${BaseUser.realName}"></option>
        </select>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">收款凭证</label>
      <div class="layui-input-inline">
        <input type="file" name="filePath" id="user-photo" lay-verify="file" multiple>
        <div th:if="${ProofBargain.fileAddress != null}" style="display: flex">
          <div th:each="address : ${#strings.arraySplit(ProofBargain.fileAddress, '|')}" style="display: inline-block; position: relative;">
            <img style="width: 200px; height: 200px; margin-left: 1px; margin-bottom: 1px; display: inline-block;" onclick="imgcli(this)" th:src="'/file/img?imgaddress='+ ${address}">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <div id="imgdiv">

      </div>
    </div>
  </div>

  <div class="layui-form-item" >
    <div class="layui-inline" style="padding-left: 22px;">
      <button class="layui-btn"lay-filter="submitForm" lay-submit id="submit" style="padding-left: 22px; margin-bottom: 20px;">提交修改单</button>
    </div>
  </div>
</form>

<script>

  // var ProcessEntityPaymentWay = document.getElementById("ProcessEntityPaymentWay").value;
  // console.log("207",ProcessEntityPaymentWay)
  // // 根据 paymentWay 的值设置单选按钮的状态
  // if (ProcessEntityPaymentWay == "1") {
  //   document.getElementById("radioYes").checked = true;
  // } else if (ProcessEntityPaymentWay == "2") {
  //   document.getElementById("radioNo").checked = true;
  // }
</script>

<script>
  var $= layui.$
  $('#divimg').click(function(){$(this).fadeOut(200)})
  // function imgcli(obj){
  //   $('#divimg').fadeIn(200);
  //   $('#divimg img').attr('src',$(obj).attr("src"));
  //   $('#divimg img').css("margin-top","-"+$('#divimg img').height()/2+"px")
  // }

  function imgcli(obj) {
    if (confirm("确定要删除这张图片吗？")) {
      var imgSrc = $(obj).attr('src');
      var id = $('#formid').val();
      // 通过split方法将路径分割成数组，并选择需要的部分
      var pathArray = imgSrc.split('=');
      var imagePath = pathArray[pathArray.length - 1];

      console.log("Deleted image path: " + imagePath + " ID: " + id);



      $('#submit').click(function() {
        var data = JSON.stringify({
          ImagePath: imagePath,
          id: id
        });

      $.ajax({
        type: "POST",
        url: "/process/DeletedImagePath",
        contentType: "application/json",
        data: data,
        success: function(response) {
          console.log(response);
          if (response!=="200"){
            alert("操作失败!");
          }
        }
      });
      });
      $(obj).parent().remove();

    }
  }
</script>

<script>

  var ProcessEntityPaymentWay = document.getElementById("ProcessEntityPaymentWay").value;
  console.log("207",ProcessEntityPaymentWay)
  // 根据 paymentWay 的值设置单选按钮的状态
  if (ProcessEntityPaymentWay == "1") {
    document.getElementById("radioYes").checked = true;
  } else if (ProcessEntityPaymentWay == "2") {
    document.getElementById("radioNo").checked = true;
    // 隐藏外层div
    document.getElementById("invoice-contract").style.display = "none";
  }


  function deleteprocess() {
    // 创建表单数据对象
    var formData = new FormData();
    formData.append("id", layui.$("#formid").val());
    // 使用sendBeacon方法发送异步请求
    navigator.sendBeacon("/process/delete", formData);
  }
  layui.use(['form', 'util', 'laydate'], function(){
    var form = layui.form;
    var layer = layui.layer;
    var util = layui.util;
    var laydate = layui.laydate;
    var  $=layui.$;
    var keys=[]
    var xm


    // radio 事件
    form.on('radio(paymentWay)', function(data){
      var elem = data.elem; // 获得 radio 原始 DOM 对象
      var checked = elem.checked; // 获得 radio 选中状态
      var value = elem.value; // 获得 radio 值
      var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
      var divobj = document.getElementById("invoice-contract");
      if(value == "1"){
        // layer.msg("点1")
        divobj.style.display = "block"; // 显示
      }
      if(value == "2"){
        // layer.msg("点2")
        divobj.style.display = "none"; // 隐藏
      }
      // layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
    });


    // 上传多张图片
    var getUserPhoto = document.getElementById("user-photo");
    getUserPhoto.addEventListener('change', function() {
      var filePath = this.files;
      var imgdiv = document.getElementById("imgdiv");
      var form = document.getElementById("proofbargainForm"); // 获取表单

      // 清空图片容器
      imgdiv.innerHTML = '';

      for (var i = 0; i < filePath.length; i++) {
        var reader = new FileReader();
        reader.onload = function(e) {
          var image = document.createElement("img");
          image.src = e.target.result;
          image.style.maxWidth = "200px";
          image.style.maxHeight = "200px";
          imgdiv.appendChild(image);

          // 创建隐藏的input标签，用于提交图片数据
          var input = document.createElement("input");
          input.type = "hidden";
          input.name = "filePath[]"; // 注意这里将name属性设置为数组形式
          input.value = e.target.result;
          form.appendChild(input); // 将input元素追加到表单中
        };
        reader.readAsDataURL(filePath[i]);
      }
      // console.log("图片", filePath)
    });

    //日期
    laydate.render({
      elem: '#transferDate',
      format: 'yyyy-MM-dd', // 设定日期显示格式
      type: 'date',
      done: function(value, date) {
        if($("#friendDate").val()==null||$("#friendDate").val().length<1){
          return;
        }
        var currentDate = new Date(value);
        var targetDate = new Date($("#friendDate").val());
        var timeDiff = currentDate.getTime()-targetDate.getTime() ;
        var daysDiff = Math.floor(timeDiff / (1000 * 3600 * 24))+1;
        if(daysDiff<=0){
          daysDiff=""
        }
        $("#tradeTime").val(daysDiff)
      }
    });
    laydate.render({
      elem: '#friendDate',
      format: 'yyyy-MM-dd', // 设定日期显示格式
      type: 'date',
      done: function(value, date) {
        if($("#transferDate").val()==null||$("#transferDate").val().length<1){
          return;
        }
        var currentDate =new Date($("#transferDate").val());
        var targetDate = new Date(value);
        var timeDiff = currentDate.getTime()-targetDate.getTime() ;
        var daysDiff = Math.floor(timeDiff / (1000 * 3600 * 24))+1;
        if(daysDiff<=0){
          daysDiff=""
        }
        $("#tradeTime").val(daysDiff)
      }
    });
    //自定义验证规则
    form.verify({

      name: function(value){
        if(value.length < 1){
          return '必填';
        }
      },
      telephone: function(value){
        if(value.length < 1){
          return '必填';
        }
        if (!/^1[3456789]\d{9}$/.test(value)){
          return  "请输入正确电话号码"}
      },
      transferDate:function (value){
        if(value.length < 1){
          return '必填';
        }
      },
      paymentAmount: function(value){
        if(value.length < 1){
          return '必填';
        }
        if(!/^[0-9.]+$/.test(value)){
          return '请输入数字';
        }
      },
      paymentWay: function(value){
        if($('input[name="paymentWay"]:checked').length < 1){
          return '请选择是否全款';
        }
      },
      contract: function(value){
        var paymentWay = $('input[name="paymentWay"]:checked').val();
        if(paymentWay == '1' && $('input[name="contract"]:checked').length < 1){
          return '请选择合同签署方式';
        }
      },

      invoice: function(value){
        var paymentWay = $('input[name="paymentWay"]:checked').val();
        if(paymentWay == '1' && $('input[name="invoice"]:checked').length < 1){
          return '请选择发票方式';
        }
      },
      paymentMethod: function(value, item){
        var radioName = $(item).attr('name');
        var isChecked = false;
        $('input[name="' + radioName + '"]').each(function() {
          if ($(this).is(':checked')) {
            isChecked = true;
            return false;
          }
        });
        if (!isChecked) {

          return '收款方式必填';
        }
      },
      paymentAddress: function(value, item){
        var radioName = $(item).attr('name');
        var isChecked = false;
        $('input[name="' + radioName + '"]').each(function() {
          if ($(this).is(':checked')) {
            isChecked = true;
            return false;
          }
        });
        if (!isChecked) {
          return '收款方必填';
        }
      },
      idCard: function(value){
        if(value.length < 1){
          return '必填';
        }
        if ( !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)&&value.length>0){
          return "请输入正确身份证号";
        }
      },
    });

    form.on('submit(submitForm)', function(data){
      // 获取表单数据
      var sindex= layer.load(2, {shade: [0.5,'#000']});
      return true;
    });


  });
</script>

</body>
</html>